import React from 'react'
import { connect } from 'react-redux'
import { Mutation } from 'react-apollo'
import PropTypes from 'prop-types'
import { Grid, Header } from 'semantic-ui-react'
import Register from 'graphql/user/signup.graphql'
import validUserEmail from 'graphql/validUserEmail.graphql'
import { ValidType, ValidForm, ValidInput, ValidSubmit } from 'components/validForm'
import { global as globalDuck } from 'ducks'
import PublicHome from 'containers/home'

const userNameRule = [
  {
    type: ValidType.REGULAR,
    value: /^[A-Za-z0-9_\u4e00-\u9fa5]{0,16}$/,
    errorMessage: '用户名由1到16位数字字母，或者汉字组成',
  },
]

const signUpGraphQLParams = [
  {
    paramName: 'nickname',
    fieldName: 'nickname',
  },
]

const SignUp = ({ authInfo, actionReciveUser}) => (
  <PublicHome>
    <Grid textAlign="center" style={{ height: '100%' }} verticalAlign="middle">
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header size='large'>完善个人信息</Header>
        <Mutation mutation={Register} onCompleted={data => actionReciveUser(data.insert_user.returning[0])}>
          {(addTodo, { data, loading, error }) => (
            <ValidForm size="large" loading={loading}>
              <ValidInput
                name="nickname"
                fluid
                icon="user"
                iconPosition="left"
                placeholder="用户昵称"
                valid
              />
              <ValidSubmit
                graphqlParams={signUpGraphQLParams}
                graphqlAddtodo={addTodo}
                primary
                fluid
                size="large"
                variables={{
                  name: authInfo.name,
                  email: authInfo.email,
                  avatar: authInfo.picture,
                }}
              >
                完成注册
              </ValidSubmit>
            </ValidForm>)
        }
        </Mutation>
      </Grid.Column>
    </Grid>
  </PublicHome>
)

SignUp.propTypes = {
  signIn: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  authInfo: globalDuck.selectors.authInfo(state),
})


const mapDispatchToProps = {
  actionReciveUser: globalDuck.creators.actionReciveUser,
}

export default connect(mapStateToProps, mapDispatchToProps)(SignUp)
